<script lang="ts" setup>
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { useScrollStore } from '@/stores/scroll'
import { RouteNameEnum } from '@/enum'

const scrollStore = useScrollStore()
const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) {
    return
  }
  calendar.value.selectDate(val)
}

let note = ref(
  '人生如一场修行，得意时，一日看尽长安花；艰难时，潦倒新停浊酒杯，' +
    '但生命的跋涉不能回头，哪怕畏途巉岩不可攀，也要会当凌绝顶；哪怕无人会，登临意，也要猛志固常在。' +
    '“ UTOPIA ” 一个基于 SpringBoot3 + Vue3 构建的个人博客。' +
    '进入大学校园后，我对开发个人网站产生了浓厚的兴趣。' +
    '这种兴趣源于对编程的热爱，随着对编程技术的深入学习，以及一次偶然的机会，' +
    '我浏览到了一些大佬开发的个人博客，这使我更加渴望拥有自己的个人博客。2023 年 12 月初，' +
    '我参考了大佬们的个人网站，开始了自己的博客开发之旅。我计划在开发博客的过程中不断学习和深化对技术的理解。' +
    '然而计划赶不上变化，导致博客开发了一半后就荒废了。直到 2025 年 8 月份才又重启我的博客开发之旅。' +
    '后来便有了 “UTOPIA” 。'
)
</script>

<template>
  <el-container class="max-md:!flex-col h-fit">
    <el-main class="md:w-1/4 sm:min-w-80 gap-10 !flex flex-col max-md:flex-row max-sm:flex-col">
      <el-container class="!min-h-80 max-md:w-1/2 max-sm:w-full">
        <el-calendar
          ref="calendar"
          class="use-second-bg use-shadow use-radius-sm use-transitions-colors-short"
        >
          <template #date-cell="{ data }">
            <p
              :class="data.isSelected ? 'is-selected relative text-center' : 'relative text-center'"
            >
              {{ data.day.split('-').slice(2).join('-') }}
              <span class="absolute left-0 top-0">
                {{ data.isSelected ? '✔️' : '' }}
              </span>
            </p>
          </template>
          <template #header="{ date }">
            <el-container class="gap-5 items-center justify-center">
              <SvgIcon
                name="downward"
                parentClass="cursor-pointer"
                svg-class="rotate-90"
                @click="selectDate('prev-month')"
              />
              <span class="text-center">{{ date }}</span>
              <SvgIcon
                name="downward"
                parentClass="cursor-pointer"
                svg-class="-rotate-90"
                @click="selectDate('next-month')"
              />
            </el-container>
          </template>
        </el-calendar>
      </el-container>
      <el-container class="min-h-40 flex !flex-col gap-8 max-md:w-1/2 max-sm:w-full use-radius">
        <span class="text-3xl hollow-text">莫等闲</span>
        <span class="text-5xl">白了少年头</span>
        <span class="text-3xl hollow-text">空悲切!</span>
      </el-container>
    </el-main>
    <el-container class="md:w-3/4">
      <DiaryBook :content="note" :title="''" />
    </el-container>
  </el-container>
  <RouteA :name="RouteNameEnum.DIARY" />
</template>

<style lang="scss" scoped></style>
